<template>
  <div id="app">
    <mt-header title="笑脸地图">
      <a slot="left" href="javascript:history.back(-1)">
        <mt-button icon="back">返回</mt-button>
      </a>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <main>
      <div class="seachfrom">
        <form data-formposition="i" class="se-form" id="index-form" action="/from=844b/s" method="get" autocomplete="off">
          <div class="con-wrap">
            <select v-model="selected">
                  <option >请选择业态</option>
                <option v-for="option in options" v-bind:value="option.id">  
                    {{ option.name}}  
                </option>  
            </select>
            <input type="search" v-model="seachtextnew" placeholder="查找企业" class="se-input adjust-input">
            <div class="se-inner"><button id="index-bn" class="se-bn" type="button" @click="seach()">搜索</button>
            </div>
          </div>
        </form>
      </div>
      <div id="container" style="width:100%; height:300px"></div>
      <div class="enterprise" v-if="this.listData.length!=0">
        <li v-for="item in this.listData" :key="item.unid">
          <router-link :to='{name:"Mapdetail",query:{Content:item}}'>
            <p>
              <img src="../../../static/img/green.png">{{item.name}}
            </p>
            <p>
              地址:{{item.address}}
              <br>电话:{{item.contactPhone}}
            </p>
          </router-link>
        </li>
      </div>
      <div class="none_data" v-else>
        <img src="../../img/tip.png">
      </div>
  
    </main>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios';
  var map;
  var myGer;
  var infoWindow;
  var currentPosition
  var enterprise
  var geolocation
  var MapCity = "0951";
  var MapName = "茌平县";
  import {
    Header,
    Button,
    Toast
  } from 'mint-ui';
  import {
    EnterpriseCPData
  } from '../../api/api';
  export default {
    data() {
      return {
        imageUrl: '../../static/img/green.png',
        listData: [],
        geolocation: '',
        currentPosition: "",
        nonedata: false,
        seachtextold: this.$route.query.seachtext,
        seachtextnew: '',
  
        industryTypeold: this.$route.query.type,
        industryTypenew: '',
  
  
        selected: '请选择业态',
        options: [{
            id: "-2",
            name: "食品生产"
          },
          {
            id: "-1",
            name: "食品流通"
          },
          {
            id: "0",
            name: "餐饮服务"
          },
          {
            id: "10",
            name: "药品生产"
          },
          {
            id: "11",
            name: "药品经营"
          }
        ]
  
      };
    },
    components: {
      "mt-button": Button,
      "mt-header": Header,
    },
    created() {},
    mounted: function() {
      this.init();
    },
    methods: {
      init: function() {
        /***************************************************@author初始化*********************************************/
        map = new AMap.Map('container', {
          center: [116.25522, 36.58068],
          resizeEnable: true,
          zoom: 10
        })
        map.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation'], function() {
          map.addControl(new AMap.ToolBar())
          map.addControl(new AMap.Scale())
          geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, //是否使用高精度定位，默认:true
            timeout: 1000, //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition: 'RB'
          });
          //  map.addControl(geolocation);
          geolocation.getCurrentPosition();
          AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
        });
  
        function onComplete(data) {
          var str = [];
          str.push(data.position.getLng());
          str.push(data.position.getLat());
          currentPosition = str.join(',');
          console.log(currentPosition)
          localStorage.setItem('currentPosition', JSON.stringify({
            currentlng: data.position.getLng(),
            currentlat: data.position.getLat()
          }));
        }
        this.LoadMapData();
      },
      seach: function() {
        this.seachtextold = this.seachtextnew
        if (this.selected == '请选择业态') {
          this.industryTypeold = ''
        } else {
          this.industryTypeold = this.selected
        }
        this.LoadMapData()
      },
      LoadMapData: function() {
        let options = {
          params: {
            whereValue: this.seachtextold,
            industryType: this.industryTypeold,
            scoreLevel: '优秀', //默认A级
          }
        }
        //调取接口
        EnterpriseCPData(options).then((res) => {
          if (res.success === true) {
            if (res.data.length == 0) {
              Toast({
                message: '该单位目前未上线，建议您使用‘附近笑脸单位’功能选择您附近的笑脸单位进行消费',
                position: 'top',
                duration: 2000
              });
            }
            this.listData = res.data;
            this.ShowData(res.data)
  
          }
        })
  
      },
      ShowData: function(data) {
        map.clearMap()
        if (data != null && data.length != 0) {
          for (var i in data) {
            if (data[i].baiduPoint != null) {
              this.AddMarketNew(data[i])
            }
          }
        }
      },
      AddMarketNew: function(item) {
        if (item.scoreLevel == '优秀') {
          item.scoreLevel = 'A'
        }
        if (item.scoreLevel == '良好') {
          item.scoreLevel = 'B'
        }
        if (item.scoreLevel == '一般') {
          item.scoreLevel = 'C'
        }
        // enterprise = item;
        var imageUrl = this.imageUrl;
        var markerIcon = new AMap.Marker({
          map: map,
          position: [item.baiduPoint.split(',')[0], item.baiduPoint.split(',')[1]],
          title: (item.name + "-" + item.code),
          icon: new AMap.Icon({
            size: new AMap.Size(35, 60), //图标大小
            image: imageUrl,
            imageOffset: new AMap.Pixel(0, 25),
  
          })
        });
        //查询数据
        var infoWindow = new AMap.InfoWindow();
        var startDate=item.startDate.split(' ')[0]
        var endDate=item.endDate.split(' ')[0]
        markerIcon.content = '<div class="mapcontent">' +
          '<h4>' + item.name + '<span style="float:right;color: #229a44;font-size: 1rem;margin-top: -5px;">' + item.scoreLevel + '</span>' + '</h4>' +
          '<p>' + '联系方式:' + item.contactPhone + '</p>' +
          '<p>' + '地址:' + item.address + '</p>' +
          '<p>' + '许可证号:' + item.code + '</p>' +
          '<p>' + '有效期限:' + startDate + '至' + endDate+ '</p>' +
          '<p>' +
          '<a class="pull-left"  href="tel:\'' + item.contactPhone + '\'">' + '一键拨号' + '</a>' +
          '<a class="pull-right" onclick="ViewCheckData(\'' + item.baiduPoint + '\',\'' + item.address + '\',\'' + this.currentPosition + '\')">' + '一键导航' + '</a>' +
          '</p>' +
          '</div>';
        map.setFitView()
        markerIcon.on('click', markerClick);
  
        function markerClick(e) {
          infoWindow.setContent(e.target.content);
          infoWindow.open(map, e.target.getPosition());
        }
        //   map.setFitView();
        //  var infoWindow = new AMap.InfoWindow();
        //   for (var i = 0, marker; i < item.length; i++) {
  
        //     marker.content = '我是第' + i + '个信息窗体的内容';
        //     //给Marker绑定单击事件
        //     marker.on('click', markerClick);
        //   }
        //   function markerClick(e) {
        //     infoWindow.setContent(e.target.content);
        //     infoWindow.open(map, e.target.getPosition());
        //   }
        //   map.setFitView();
      },
      //  ViewCheckData:function(unid){
      //    alert()
      //  }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .amap-info-content {
    padding: 12px 18px 10px 12px;
  }
  
  .amap-info-content .mapcontent {
    p {
      color: #9a9999;
      a {
        color: #fff;
        background: #FF6A2A;
        font-size: 0.9rem;
        padding: 6px 10px;
        border-radius: 5px;
      }
    }
  }
  
  .map {
    width: 100%;
    height: 250px;
  }
  
  .enterprise {
    position: fixed;
    width: 100%;
    height: 500px;
    overflow-y: scroll;
    li {
      border-bottom: 1px solid #e7e7e7;
      a {
        padding: 10px 0 10px 10px;
        overflow: hidden;
        display: block;
        z-index: 999;
        p {
          margin: 0;
          img {
            width: 20px;
            height: 20px;
            display: inline-block;
            margin-right: 0.65rem;
            vertical-align: text-bottom;
          }
        }
      }
    }
  }
  
  .enterprise li p:first-child {
    margin-bottom: 5px;
    color: #333333;
    font-size: .95rem;
  }
  
  .enterprise li p:last-child {
    color: #868686;
  }
  
  
  /*搜索*/
  
  #index-form {
    margin: 0
  }
  
  .seachfrom {
    background: #fff;
    padding: 10px 15px;
    border-bottom: 1px solid #e7e7e7;
  }
  
  #index-form {
    margin: 0 16px;
    height: 35px;
    background: #fff;
    border: 1px solid #d2d2d2;
    -webkit-border-radius: 2px;
    border-radius: 2px;
  }
  
  #index-form .con-wrap {
    display: -moz-box;
    display: -webkit-box;
    display: box;
    width: 100%;
  }
  
  .con-wrap {
    select {
      border: none;
      height: 35px;
      box-sizing: border-box;
      color: #757575;
      background: #fff;
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
    }
  }
  
  .se-input {
    -webkit-border-radius: 0;
    border-radius: 0;
    margin: 0;
    height: 35px;
    line-height: 28px;
    resize: none;
    overflow: hidden;
    border: 0;
    box-sizing: border-box
  }
  
  .se-input,
  .se-encode {
    -webkit-appearance: none;
    display: block;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
    font-size: .9rem;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  
  .adjust-input {
    position: relative;
    word-break: break-all;
    word-wrap: break-word;
    box-sizing: border-box;
    // background: url(../img/seach.png) no-repeat;
    background-position: 8px;
    text-align: left;
  }
  
  .se-inner {
    width: 82px;
    position: relative;
  }
  
  #index-bn {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 60px;
    height: 35px;
    background: #21aeff;
    color: #fff;
    white-space: nowrap;
    line-height: 35px;
    letter-spacing: -1px;
    font-size: .95rem;
    box-sizing: inherit;
    border: rgba(255, 0, 0, 0);
    -webkit-border-top-right-radius: 2px;
    border-top-right-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    border-bottom-right-radius: 2px;
    text-shadow: none;
  }
</style>
